<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>增减商品数量</title>
    <script src="jquery.min.js"></script>
</head>
<body>
    <!-- 【思路：首先声明一个变量，当点击+号，就++，然后把++后的值赋给文本框 -->
    <div class="box">
        <span class='price'>单价：<input type="text" value='12.30' class='price'></span> 
        <input type="button" value="-" class='delcrement'>
        <input type="text" class='text' value='1'>
        <input type="button" value="+" class='increment'>
        <span class='all'>小计：<input type="text" value='12.30' class='all'></span>
    </div>
    <div class="box">
            <input type="button" value="-" class='delcrement'>
            <input type="text" class='text' value='1'>
            <input type="button" value="+" class='increment'>
    </div>
    <div class="box">
            <input type="button" value="-" class='delcrement'>
            <input type="text" class='text' value='1'>
            <input type="button" value="+" class='increment'>
    </div>

    <script>
        $(function(){
           
            // // 增减商品数量
            // $('.increment').click(function(){
            //      // 先获取文本框的值，
            //     var n = $(this).siblings('.text').val();
            //     //当点击加号后，在该值的基础上进行++
            //     $(this).siblings('.text').val(++n);
            //     // 获取变化后的value值
            //     var x = $(this).siblings('.text').val();
            //     console.log(x);
            // });
            // // 当点击减号，在当前值的基础上进行自减
            // $('.delcrement').click(function(){
            //     // 先获取文本框的值，
            //     var n = $(this).siblings('.text').val();
            //     // 判断是否=1  【先判断，再操作】
            //     if(n==1){
            //         return false;
            //     }
            //     // 操作减少n的数值
            //     $(this).siblings('.text').val(--n);
            //     // 如果n===1，就跳出函数，所以每减一次都要将减完后的值赋值给input框，然后进行判断
            //     console.log(n);    
            // });

            // 随着商品数量的增减，改变商品金额小计的值   这个方法有一个bug，如果用户直接输入商品数量，没有通过点击事件，那么就获取不到所有数据，商品总价也不会改变。那么可以使用change事件
            $('.increment').click(function(){
                 // 获取初始商品数量
                var n = $(this).siblings('.text').val();
                // 获取商品单价
                var price = $(this).siblings('.price').children('.price').val();
                console.log(price);
                //当点击加号后，在商品数量初始值的基础上进行++
                $(this).siblings('.text').val(++n);
                // 获取变化后的商品数量---value值
                var x = $(this).siblings('.text').val();
                console.log(x);
                // 计算得到商品总价
                var money = x*price;
                console.log(money);
                // 将money赋值给小计的value
                $(this).siblings('.all').children('.all').val(money);
            });
            // 当点击减号，在当前值的基础上进行自减
            $('.delcrement').click(function(){
                // 先获取商品数量的初始值，
                var n = $(this).siblings('.text').val();
                // 获取商品单价
                var price = $(this).siblings('.price').children('.price').val();
                // 先判断商品数量是否=1  【先判断，再操作】  // 如果n===1，就跳出函数，所以每减一次都要将减完后的值赋值给input框，然后进行判断
                if(n==1){
                    return false;
                }
                // 操作减少商品数量---n的数值
                $(this).siblings('.text').val(--n);
                console.log(n);    
                // 获取变化后的商品数量
                var x = $(this).siblings('.text').val();
                // 计算得到减少后的商品总价
                var money = x*price;
                // 将money赋值给小计的value
                $(this).siblings('.all').children('.all').val(money);      
            });

            // 假如用户不点击+ —按钮，而是直接在input框输入商品数量，就使用change函数。只要输入框发生变化，就会触发此函数
            $('.text').change(function(){
                // 获取到商品数量
                 var a = $(this).val();
                // 获取商品单价
                var b = $(this).siblings('.price').children('.price').val();
                // 计算商品总价
                var m = a*b;
                // 将m赋值给商品总价的value值
                $(this).siblings('.all').children('.all').val(m);
            });

        })
    </script>
</body>
</html>